<template>
  <div class="view-iframe">
    <n-card>
      <n-h2 prefix="bar">
        <n-text type="primary"> iframe组件示例 </n-text>
      </n-h2>
      <n-space>
        <n-button
          @click="value === '' ? (value = html) : (value = '')"
          :type="value !== '' ? 'success' : 'default'"
          >测试取值</n-button
        >
        <n-button
          @click="config.adaptionHeight = !config.adaptionHeight"
          :type="config.adaptionHeight ? 'success' : 'default'"
          >自适应高度</n-button
        >
        <n-button
          @click="config.hideScrollBar = !config.hideScrollBar"
          :type="config.hideScrollBar ? 'success' : 'default'"
          >隐藏滑轮</n-button
        >
        <n-button
          @click="config.hideScrollWidth = '18px'"
          :type="config.hideScrollWidth === '18px' ? 'success' : 'default'"
          >默认隐藏滑轮宽度：18px</n-button
        >
      </n-space>
    </n-card>
    <div class="iframe">
      <n-card>
        <n-h3 prefix="bar">
          <n-text type="primary"> iframe </n-text>
        </n-h3>
        <pro-iframe :srcdoc="value" v-bind="config" />
      </n-card>
    </div>
  </div>
</template>
<script lang="ts" setup name="Iframe">
const html = `<h1>lalala</h1>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d78091f1dae4da79684fd2699368758~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e7d37251bc04bf48caafe62eae2991e~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ca3c15664f94dca8abca35834e8f20f~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b91fbed7babb46f9bbeb0cca577ac8ef~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/168e0858b6ccfd57fe5~tplv-t2oaga2asx-no-mark:100:100:100:100.awebp" width="30" height="30" />
<h1>lalala</h1><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7d2433138fb407bb2c900e578a98d37~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8eff71c8215c4655924622862d16890c~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?t=${new Date()}" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15f782f5da0e4f3290821bc7c20ffb9b~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4416edb282e64924b6e91491a21b5f3d~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?t=${new Date()}" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23a4c8ed91474726b9cb55e5fe47e244~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?t=${new Date()}" width="30" height="30" />
<h1>lalala</h1><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe84d3ab556e4c3fbb42037e2d85ca45~tplv-k3u1fbpfcp-no-mark:720:720:720:480.awebp?t=${new Date()}" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7752a11a31e64d1187869b4c007be434~tplv-k3u1fbpfcp-zoom-crop-mark:304:304:304:302.awebp?t=${new Date()}" width="30" height="30" /></p>`

const value = ref('')

const config = reactive({
  adaptionHeight: true,
  hideScrollBar: true,
  openLoading: true,
  hideScrollWidth: '18px'
})
</script>
<style lang="less" scoped>
.iframe {
  margin-top: 20px;
}
</style>
